<template>
    <div id="cb_content">
        <!-- //开头部分-->
        <el-row class="cb_first">
            <el-col :span="20">
                <div class="cb_left" id="cb_shouye">
                    <span>
                        <svg class="icon_homepage" aria-hidden="true">
  <use xlink:href="#icon-shouye"></use>
</svg>
                    </span>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="cb_right cb_person">
                    <div style="line-height: normal" id="cb_person_information">
                      <!--  <img id="cb_touxiang" src="../../assets/images/123.jpg" alt="">-->
                        <div  id="cb_touxiang_content">
                            <svg id="cb_touxiang" class="icon" aria-hidden="true"><use
                                    xlink:href="#icon-zhanghaosvg"></use></svg>
                        </div>
                        <span id="cb_person_zi">{{cb_username}}</span>
                    </div>
                    <span class="iconfont icon-zhankai" style="font-size: 1.5em"></span>
                </div>
            </el-col>
        </el-row>
        <!--   内容部分-->
        <el-row class="cb_second">
            <el-col :span="20">
                <div class="cb_left">
                    <!--//这个是内容第一行-->
                    <el-row :gutter="20" class="cb_row1">
                        <el-col :span="8">
                            <div class="cb_one">
                                <div class="cb_one_content">
                                    <span class="cb_one_content_zi">今日订单总数</span>
                                    <span class="cb_one_content_shu">{{myHomeDataObj.dealToday}}</span>
                                </div>
                                <div>
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-dingdanrongzizonge"></use>
                                    </svg>
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="cb_one">
                                <div class="cb_one_content">
                                    <span class="cb_one_content_zi">今日销售总额</span>
                                    <span class="cb_one_content_shu">￥{{myHomeDataObj.dealTodayMoney}}</span>
                                </div>
                                <div>
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-jinrixiaoshoue"></use>
                                    </svg>
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="cb_one">
                                <div class="cb_one_content">
                                    <span class="cb_one_content_zi">昨日销售总额</span>
                                    <span class="cb_one_content_shu">￥{{bignumber[1]}}</span>
                                </div>
                                <div>
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-xiaoshouyejitongji"></use>
                                    </svg>
                                </div>
                            </div>
                        </el-col>
                    </el-row>

                    <!-- //这个是内容第二行-->
                    <el-row :gutter="20" class="cb_row2-1">
                        <el-col :span="12">
                            <div class="grid-content bg-purple">商品总览</div>
                        </el-col>
                        <el-col :span="12">
                            <div class="grid-content bg-purple">用户总览</div>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20" class="cb_row2-2">
                        <el-col :span="12">
                            <div class="cb_two">
                                <div class="cb_two_left">
                                    <span class="iconfont icon-xiajia cb_two_left_icon"></span>
                                    <span class="cb_two_left_zi">已下架商品</span>
                                    <span class="cb_two_left_shu">{{smallnumber[1]}}</span>
                                </div>
                                <div class="cb_two_left">
                                    <span class="iconfont icon-shangjia cb_two_left_icon"></span>
                                    <span class="cb_two_left_zi">已上架商品</span>
                                    <span class="cb_two_left_shu">{{smallnumber[2]}}</span>
                                </div>
                                <div class="cb_two_left">
                                    <span class="iconfont icon-icon_jinggao cb_two_left_icon"></span>
                                    <span class="cb_two_left_zi">库存紧张商品</span>
                                    <span class="cb_two_left_shu">{{smallnumber[3]}}</span>
                                </div>
                                <div class="cb_two_left">
                                    <span class="iconfont icon-ego-box cb_two_left_icon"></span>
                                    <span class="cb_two_left_zi">全部商品</span>
                                    <span class="cb_two_left_shu">{{smallnumber[4]}}</span>
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="cb_two">
                                <div class="cb_two_left">
                                    <span class="iconfont icon-jinrigaikuang cb_two_left_icon"></span>
                                    <span class="cb_two_left_zi">今日新增</span>
                                    <span class="cb_two_left_shu">{{smallnumber[5]}}</span>
                                </div>
                                <div class="cb_two_left">
                                    <span class="iconfont icon-zuorigaikuang cb_two_left_icon"></span>
                                    <span class="cb_two_left_zi">昨日新增</span>
                                    <span class="cb_two_left_shu">{{smallnumber[6]}}</span>
                                </div>
                                <div class="cb_two_left">
                                    <span class="iconfont icon-quanbudingdan cb_two_left_icon"></span>
                                    <span class="cb_two_left_zi">本月新增</span>
                                    <span class="cb_two_left_shu">{{bignumber[2]}}</span>
                                </div>
                                <div class="cb_two_left">
                                    <span class="iconfont icon-huiyuan cb_two_left_icon"></span>
                                    <span class="cb_two_left_zi">会员总数</span>
                                    <span class="cb_two_left_shu">{{bignumber[3]}}</span>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                    <!--    //这个是第三行-->
                    <el-row :gutter="20" class="cb_row3-1">
                        <el-col :span="24">
                            <div class="grid-content bg-purple">订单统计</div>
                        </el-col>
                    </el-row>
                    <el-row class="cb_row3-2" >
                        <el-col :span="6">
                            <div class="cb_tongji">
                                <div class="cb_jieshao">
                                    <!--//1-->
                                    <div class="cb_jieshao_zi">
                                        <div class="cb_tongji_shu">
                                            <span class="cb_font" id="cb_font_1">本月订单总数</span>
                                            <span>{{myHomeDataObj.dealMonth}}</span>
                                        </div>
                                        <div class="cb_tongji_shu">
                                            <div class="cb_shuzi">
                                                <span>+</span>
                                                <span>{{percent[0]}}</span>
                                                <span>%</span>
                                            </div>
                                            <span class="cb_font">同比上月</span>
                                        </div>
                                    </div>
                                    <!--//2-->
                                    <div class="cb_jieshao_zi">
                                        <div class="cb_tongji_shu">
                                            <span class="cb_font" id="cb_font_2">本周订单总数</span>
                                            <span>{{myHomeDataObj.dealWeek}}</span>
                                        </div>
                                        <div class="cb_tongji_shu">
                                            <div class="cb_shuzi2">
                                                <span>-</span>
                                                <span>{{percent[1]}}</span>
                                                <span>%</span>
                                            </div>
                                            <span class="cb_font">同比上周</span>
                                        </div>
                                    </div>
                                    <!-- //3-->
                                    <div class="cb_jieshao_zi">
                                        <div class="cb_tongji_shu">
                                            <span class="cb_font" id="cb_font_3">本月销售总额</span>
                                            <span>{{myHomeDataObj.dealMonthMoney}}</span>
                                        </div>
                                        <div class="cb_tongji_shu">
                                            <div class="cb_shuzi2">
                                                <span>-</span>
                                                <span>{{percent[2]}}</span>
                                                <span>%</span>
                                            </div>
                                            <span class="cb_font">同比上月</span>
                                        </div>
                                    </div>
                                    <!-- //4-->
                                    <div class="cb_jieshao_zi">
                                        <div class="cb_tongji_shu">
                                            <span class="cb_font" id="cb_font_4">本周销售总额</span>
                                            <span>{{myHomeDataObj.dealWeekMoney}}</span>
                                        </div>
                                        <div class="cb_tongji_shu">
                                            <div class="cb_shuzi">
                                                <span>+</span>
                                                <span>{{percent[3]}}</span>
                                                <span>%</span>
                                            </div>
                                            <span class="cb_font">同比上周</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="18">
                            <el-row>
                                <el-col :span="24" id="cb_search_col" >
                                    <div class="c_search">
                                        <!--月份选择-->
                                        <div class="block" style="border-radius: 8px;background: #F8F8F8;box-shadow:1px 1px 1px 1px #cccccc;cursor: pointer">
                                            <el-date-picker
                                                    v-model="value2"
                                                    @change="cb_change"
                                                    type="daterange"
                                                    align="right"
                                                    unlink-panels
                                                    range-separator="至"
                                                    start-placeholder="开始日期"
                                                    end-placeholder="结束日期"
                                                    :picker-options="pickerOptions">
                                            </el-date-picker>
                                        </div>
                                    </div>
                                </el-col>
                            </el-row>
                                <!--  //echarts部分-->
                                    <!-- //上部搜索框部分-->
                                <el-row>
                                    <el-col :span="24" >
                                        <div id="chartLineBox" style="height: 60vh"> </div>
                                    </el-col>

                                </el-row>


                        </el-col>
                    </el-row>

                </div>
            </el-col>

            <!--  //右侧显示部分-->
            <el-col :span="4">
                <div class="cb_right">
                    <div id="cb_right_header">待处理事务</div>
                    <!--//待付款订单-->
                    <div class="cb_tankuang" id="to_order1">
                        <div class="cb_zuo">
                            <svg class="icon_right" aria-hidden="true">
                                <use xlink:href="#icon-wodedingdan-daifukuan"></use>
                            </svg>
                            <div class="cb_tankuang_content">
                                <span>待付款订单</span>
                                <span class="cb_font">{{information1}}</span>
                            </div>
                        </div>
                        <div class="cb_zuo_shuzi" id="news1">
                            <span>{{news[0]}}</span>
                        </div>
                    </div>
                    <!--//待发货订单-->
                    <div class="cb_tankuang" id="to_order2">
                        <div class="cb_zuo">
                            <svg class="icon_right" aria-hidden="true">
                                <use xlink:href="#icon-shouye_daifahuo"></use>
                            </svg>
                            <div class="cb_tankuang_content">
                                <span>待发货订单</span>
                                <span class="cb_font">{{information2}}</span>
                            </div>
                        </div>
                        <div class="cb_zuo_shuzi" id="news2">
                            <span>{{news[1]}}</span>
                        </div>
                    </div>
                    <!-- //已发货订单-->
                    <div class="cb_tankuang" id="to_order3">
                        <div class="cb_zuo">
                            <svg class="icon_right" aria-hidden="true">
                                <use xlink:href="#icon-dingdanxiangqingyifahuo_xuanzhong"></use>
                            </svg>
                            <div class="cb_tankuang_content">
                                <span>已发货订单</span>
                                <span class="cb_font">{{information3}}</span>
                            </div>
                        </div>
                        <div class="cb_zuo_shuzi" id="news3">
                            {{news[2]}}
                        </div>
                    </div>
                    <!--//已完成订单-->
                    <div class="cb_tankuang" id="to_order4">
                        <div class="cb_zuo">
                            <svg class="icon_right" aria-hidden="true">
                                <use xlink:href="#icon-yiwanchengrenwu"></use>
                            </svg>
                            <div class="cb_tankuang_content">
                                <span>已完成订单</span>
                                <span class="cb_font">{{information4}}</span>
                            </div>
                        </div>
                        <div class="cb_zuo_shuzi" id="news4">
                            {{news[3]}}
                        </div>
                    </div>
                    <!-- //缺货登记-->
                    <div class="cb_tankuang" id="to_order5">
                        <div class="cb_zuo">
                            <svg class="icon_right" aria-hidden="true">
                                <use xlink:href="#icon-tongzhi"></use>
                            </svg>
                            <div class="cb_tankuang_content">
                                <span>缺货登记</span>
                                <span class="cb_font">{{information5}}</span>
                            </div>
                        </div>
                        <div class="cb_zuo_shuzi" id="news5">
                            {{news[4]}}
                        </div>
                    </div>
                    <!--//待处理退货订单-->
                    <div class="cb_tankuang" id="to_order6">
                        <div class="cb_zuo">
                            <svg class="icon_right" aria-hidden="true">
                                <use xlink:href="#icon-daifahuodingdan"></use>
                            </svg>
                            <div class="cb_tankuang_content">
                                <span>待处理退货订单</span>
                                <span class="cb_font">{{information6}}</span>
                            </div>
                        </div>
                        <div class="cb_zuo_shuzi" id="news6">
                            {{myHomeDataObj.refundToday}}
                        </div>
                    </div>
                    <!--   //待确定收获订单-->
                    <div class="cb_tankuang" id="to_order7">
                        <div class="cb_zuo">
                            <svg class="icon_right" aria-hidden="true">
                                <use xlink:href="#icon-xinxi-daiwanchenggongzuo"></use>
                            </svg>
                            <div class="cb_tankuang_content">
                                <span>待确定收货订单</span>
                                <span class="cb_font">{{information7}}</span>
                            </div>
                        </div>
                        <div class="cb_zuo_shuzi" id="news7">
                            {{news[6]}}
                        </div>
                    </div>
                    <!--  待处理退款处理-->
                    <div class="cb_tankuang" id="to_order8">
                        <div class="cb_zuo">
                            <svg class="icon_right" aria-hidden="true">
                                <use xlink:href="#icon-tuihuo"></use>
                            </svg>
                            <div class="cb_tankuang_content">
                                <span>待处理退款处理</span>
                                <span class="cb_font">{{information8}}</span>
                            </div>
                        </div>
                        <div class="cb_zuo_shuzi" id="news8">
                            {{news[7]}}
                        </div>
                    </div>
                    <!-- 广告位-->
                    <div class="cb_tankuang" id="to_order9">
                        <div class="cb_zuo">
                            <svg class="icon_right" aria-hidden="true">
                                <use xlink:href="#icon-dingdanrongzizonge"></use>
                            </svg>
                            <div class="cb_tankuang_content">
                                <span>广告位即将到期</span>
                                <span class="cb_font">{{information9}}</span>
                            </div>
                        </div>
                        <div class="cb_zuo_shuzi" id="news9">
                            {{news[8]}}
                        </div>
                    </div>

                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>

    import echarts from "echarts";
    import axios from 'axios'
    import api from "../../tool/api"
    export default {
        name: 'cb_shouye',
        data() {
            return {
                /*月份搜索*/
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }],
                    disabledDate(time) {
                        return time.getTime() > Date.now() - 8.64e6;//如果没有后面的-8.64e6就是不可以选择今天的
                    }
                },
                cb_username:"",
                value2: '',//日期
                checkedMonth: "", //选择月份
                timeData:[],
                ordernumber: [],//订单数
                orderamount:[],//订单金额
                bignumber:[],//销售总金额
                smallnumber:[],//订单总数
                news:[],//右侧信息条数
                //1-9右侧信息
                information1:"",
                information2:"",
                information3:"",
                information4:"",
                information5:"",
                information6:"",
                information7:"",
                information8:"",
                information9:"",
                percent:[],//增长百分数,
                myHomeDataObj:{},//后台返回的首页数据
/*   dealToday: 今日订单数量；dealWeek: //本周订单数量
            dealMonth: 本月订单数量； dealAll: 历史订单数量dealTodayMoney:今日销售总额
            dealWeekMoney: 本周销售总额dealMonthMoney: 本月销售总额
            dealAllMoney:历史销售总额refundToday: 今日退货数量
            refundWeek: 本周退货数量refundMonth:本月退货数量refundAll:历史退货订单数量*/
            }
        },
        /*本页面的方法库*/
        methods:{
            //获取session里面的数据
             getsession(){
                if (sessionStorage.getItem("username")) {
                    this.cb_username=sessionStorage.getItem("username")
                  /*  console.log(456)
                    console.log(this.cb_username)*/
                }
            },

            //获取echarts的数据
            async getEchartsData(){
                this.timeData=["","",""]
                var d = new Date();
                var datetime3=d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ';
                var datetime4=d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + (d.getDate()-1) + ' ';
                /*console.log(datetime3)
                console.log(datetime4)*/
                this.timeData.unshift(datetime4)
                this.timeData.push(datetime3)
                try {
                    /*获取后台订单数量数据*/
                    await axios({
                        url: api.cb_echarts_number,
                        method: 'get'
                    }).then(res => {
                        if (res.data.code === '200') this.ordernumber.push(...res.data.data);
                    /*    console.log(this.ordernumber)*/
                    });
                    /*获取后台订单金额数据*/
                    await axios({
                        url: api.cb_echarts_amount,
                        method: 'get'
                    }).then(res => {
                        if (res.data.code === '200') this.orderamount.push(...res.data.data);
                    /*    console.log(this.orderamount)*/
                    });
                /*    console.log(123); 查看执行顺序*/

                } catch (err) {

                    // 对错误信息进行处理

                }
            /*    console.log(this.orderamount)*/
            },
            //获取随机数
            async getRandomNumber(){
                try {
                    //获取订单总金额
                    await axios({
                        url: api.cb_ordermoney,
                        method: 'get'
                    }).then(res => {
                        if (res.data.code === '200') this.bignumber.push(...res.data.data);
                    });
                    //获取订单总数
                    await axios({
                        url: api.cb_ordernumber,
                        method: 'get'
                    }).then(res => {
                        if (res.data.code === '200') this.smallnumber.push(...res.data.data);
                    });
                    /*获取消息数量*/
                    await axios({
                        url:api.cb_homeNews ,
                        method: 'get'
                    }).then(res => {
                        if (res.data.code === '200') this.news.push(...res.data.data);
                    });
                    /*增长百分数*/
                    await axios({
                        url: api.cb_homepercent,
                        method: 'get'
                    }).then(res => {
                        if (res.data.code === '200') this.percent.push(...res.data.data);
                    });


                } catch (err) {

                    // 对错误信息进行处理

                }
            },
            //获取后台返回的首页信息
            async getDataarr(){
              /*  console.log(789);*/
                await axios({
                        method: "post",
                        url:api.cb_homepageData,
                    }).then(res => {
                      /*  console.log(res)*/
                       this.myHomeDataObj=res.data.data ;
                    });
            },
            //监听时间改变
            async cb_change(){
               // console.log(123)
                //console.log(this.value2[0]);
               this.timeData=["","",""]
                var d = new Date(this.value2[0]);
                var datetime1=d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ';
                var c = new Date(this.value2[1]);
                var datetime2=c.getFullYear() + '-' + (c.getMonth() + 1) + '-' + c.getDate() + ' ';
              /*  console.log(datetime1);
                console.log(datetime2);*/
                this.timeData.unshift(datetime1)
                this.timeData.push(datetime2)
            /*    console.log(this.timeData)*/
                   /*获取后台订单数量数据*/
                try {
                   await axios({
                        url: api.cb_echarts_number,
                        method: 'get'
                    }).then(res => {
                        if (res.data.code === '200') {
                            this.ordernumber=[];
                            this.ordernumber.push(...res.data.data)
                        }
                      /*  console.log(this.ordernumber)*/
                    });
                    /*获取后台订单金额数据*/
                    await axios({
                        url: api.cb_echarts_amount,
                        method: 'get'
                    }).then(res => {
                        if (res.data.code === '200'){
                            this.orderamount=[];
                            this.orderamount.push(...res.data.data);
                        }
                      /*  console.log(this.orderamount)*/
                    });
                }catch (e) {

                }
                   /*    console.log(123); 查看执行顺序*/
                this.chartLine = echarts.init(document.getElementById('chartLineBox'));
                // 指定图表的配置项和数据
                var option = {
                    tooltip: {              //设置tip提示
                        trigger: 'axis'
                    },
                    legend: {               //设置区分（哪条线属于什么）
                        data:['订单数量','订单金额']
                    },
                    color: ['#8AE09F', '#FA6F53'],       //设置区分（每条线是什么颜色，和 legend 一一对应）
                    xAxis: {                //设置x轴
                        type: 'category',
                        boundaryGap: false,     //坐标轴两边不留白
                        data: this.timeData,
                        name: '日期',           //X轴 name
                        nameTextStyle: {
                            color: '#FA6F53',
                            fontSize: 16,
                            padding: [0, 0, 0, 20]
                        },  //坐标轴名称的文字样式
                        axisLine: {             //坐标轴轴线相关设置。
                            lineStyle: {
                                color: '#FA6F53',
                            }
                        }
                    },
                    yAxis: {
                        name: '数量/金额',
                        nameTextStyle: {
                            color: '#FA6F53',
                            fontSize: 16,
                            padding: [0, 0, 10, 0]
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#FA6F53',
                            }
                        },
                        type: 'value'
                    },//y轴样式
                    series: [
                        {
                            name: '订单数量',
                            data:this.ordernumber,
                            type: 'line',               // 类型为折线图
                            lineStyle: {                // 线条样式 => 必须使用normal属性
                                normal: {
                                    color: '#8AE09F',
                                }
                            },
                        },
                        {
                            name: '订单金额',
                            data: this.orderamount,
                            type: 'line',
                            lineStyle: {
                                normal: {
                                    color: '#FA6F53',
                                }
                            },
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                this.chartLine.setOption(option);

               },
               //监听跳转

        },
        async created(){
            //获取登陆者信息
            await this.getsession();

         /*   await this.cb_change();*/
            //获取首页数据
            await this.getDataarr();
            /*获取数据*/
            await this.getRandomNumber();
             if (this.news[0]==0){
                 document.getElementById("news1").style.display="none";
                 this.information1="暂无新信息"
            }else {
                 this.information1 = "您有新的待付款订单"
                  document.getElementById("to_order1").onclick = () => {
                     this.$router.push('/ddxq');
                 }
             }
            if (this.news[1]==0){
                document.getElementById("news2").style.display="none";
                this.information2="暂无新信息"
            }else {
                this.information2="您有新的待发货订单"
                this.information1 = "您有新的待付款订单"
                document.getElementById("to_order2").onclick = () => {
                    this.$router.push('/ddxq');
                }
            }
            if (this.news[2]==0){
                document.getElementById("news3").style.display="none";
                this.information3="暂无新信息"
            }else {
                this.information3="您有新的已发货订单"
                this.information1 = "您有新的待付款订单"
                document.getElementById("to_order3").onclick = () => {
                    this.$router.push('/ddxq');
                }
            }
            if (this.news[3]==0){
                document.getElementById("news4").style.display="none";
                this.information4="暂无新信息"
            }
            else {
                this.information4="您有新的已完成订单"
                document.getElementById("to_order4").onclick = () => {
                    this.$router.push('/ddxq');
                }
            }
            if (this.news[4]==0){
                document.getElementById("news5").style.display="none";
                this.information5="暂无新信息"
            }
            else {
                this.information5="您有新的缺货登记"
                this.information1 = "您有新的待付款订单"
                document.getElementById("to_order5").onclick = () => {
                    this.$router.push('/ddxq');
                }
            }
            if (this.myHomeDataObj.refundToday===0){
                document.getElementById("news6").style.display="none";
                this.information6="暂无新信息"
            }else {
                this.information6="您有新的待处理事务"
                this.information1 = "您有新的待付款订单"
                document.getElementById("to_order6").onclick = () => {
                    this.$router.push('/ddxq');
                }
            }if (this.news[6]==0){
                document.getElementById("news7").style.display="none";
                this.information7="暂无新信息"
            }else {
                this.information7="您有新的待处理事务"
                this.information1 = "您有新的待付款订单"
                document.getElementById("to_order7").onclick = () => {
                    this.$router.push('/ddxq');
                }
            }if (this.news[7]==0){
                document.getElementById("news8").style.display="none";
                this.information8="暂无新信息"
            }else {
                this.information8="您有新的待处理事务"
                this.information1 = "您有新的待付款订单"
                document.getElementById("to_order8").onclick = () => {
                    this.$router.push('/ddxq');
                }
            }
            if (this.news[8]==0){
                document.getElementById("news9").style.display="none";
                this.information9="暂无新信息"
            }else {
                this.information9="您有新的待处理事务"
                this.information1 = "您有新的待付款订单"
                document.getElementById("to_order9").onclick = () => {
                    this.$router.push('/ddxq');
                }
            }
            await this.getEchartsData();



           //绘制图表
            this.chartLine = echarts.init(document.getElementById('chartLineBox'));
            // 指定图表的配置项和数据
            var option = {
                tooltip: {              //设置tip提示
                    trigger: 'axis'
                },
                legend: {               //设置区分（哪条线属于什么）
                    data:['订单数量','订单金额']
                },
                color: ['#8AE09F', '#FA6F53'],       //设置区分（每条线是什么颜色，和 legend 一一对应）
                xAxis: {                //设置x轴
                    type: 'category',
                    boundaryGap: false,     //坐标轴两边不留白
                    data: this.timeData,
                    name: '日期',           //X轴 name
                    nameTextStyle: {
                        color: '#FA6F53',
                        fontSize: 16,
                        padding: [0, 0, 0, 20]
                    },  //坐标轴名称的文字样式
                    axisLine: {             //坐标轴轴线相关设置。
                        lineStyle: {
                            color: '#FA6F53',
                        }
                    }
                },
                yAxis: {
                    name: '数量/金额',
                    nameTextStyle: {
                        color: '#FA6F53',
                        fontSize: 16,
                        padding: [0, 0, 10, 0]
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#FA6F53',
                        }
                    },
                    type: 'value'
                },//y轴样式
                series: [
                    {
                        name: '订单数量',
                        data:this.ordernumber,
                        type: 'line',               // 类型为折线图
                        lineStyle: {                // 线条样式 => 必须使用normal属性
                            normal: {
                                color: '#8AE09F',
                            }
                        },
                    },
                    {
                        name: '订单金额',
                        data: this.orderamount,
                        type: 'line',
                        lineStyle: {
                            normal: {
                                color: '#FA6F53',
                            }
                        },
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            this.chartLine.setOption(option);
        },
        //计算属性，对首页数据赋值
        computed: {
            myObj: {
                get: function(){
                    return this.myHomeDataObj; // 在这里把临时对象的值通过计算属性赋值给页面中用到的对象
                }
            },
        }

        //监听月份改变的时候


    }
</script>

<style lang="less" scoped>
    * {
        margin: 0;
        padding: 0;
    }
    .icon_homepage{
        width: 1.5em;
        height: 1.5em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
    }

    .icon {
        width: 4em;
        height: 4em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
    }

    .icon_right {
        width: 2em;
        height: 2em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
        margin-right: 10px;
    }


    #cb_content {
        width: 99.2%;
        height: 99.2%;
   /*     border: #1AA5FF 1px solid;*/
        border-radius: 10px;
        background: white;
    }

    //首页布局第一行
    .cb_first {
        border-bottom: #409EFF 1.5px solid;
        height: 50px;
        line-height:50px;
    }

    .cb_right {
        padding-left: 10px;
        padding-right: 15px;
    }

    .cb_left {
        border-right: #409EFF 1.5px solid;
    }

    #cb_shouye {
        padding: 0px 0px 0px 10px;
    }

    .cb_row1 {
        padding: 10px 10px;
    }

    //内容第一块 销售额
    .cb_one {
        padding: 5px 30px;
        background: #F8F8F8;
        box-shadow:1px 1px 1px 1px #cccccc;
        /*border: 1px white solid;*/
        height: 80px;
        margin-bottom: 10px;
        border-radius: 8px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .cb_one_content {
        display: flex;
        flex-direction: column;
    }

    .cb_one_content_zi {
        font-size: 0.8em;
        color: grey;
    }

    .cb_one_content_shu {
        font-size: 1.3em;
        padding: 5px 0px;
        color: red;
        font-weight: bold;
    }

    //内容第二行
    .cb_row2-1 {
        padding: 10px 10px;
        font-size: 0.8em;
    }

    .cb_row2-2 {
        padding: 0px 10px 10px 10px;
    }

    .cb_two {
        padding: 5px 40px;
        background: #F8F8F8;
        box-shadow:1px 1px 1px 1px #cccccc;
        /*border: 1px #409EFF solid;*/
        height: 120px;
        margin-bottom: 10px;
        border-radius: 8px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .cb_two_left_icon {
        margin-bottom: 8px;
        font-size: 1.5em;
    }

    .cb_two_left {
        display: flex;
        flex-direction: column;
    }

    .cb_two_left_zi {
        font-size: 0.8em;
        color: grey;
    }

    .cb_two_left_shu {
        font-size: 1em;
        padding: 5px 0px;
    }

    //第三行内容
    .cb_row3-1 {
        padding: 5px 10px;
        font-size: 0.8em;
    }

    //订单统计 第二行
    .cb_row3-2 {
        padding: 0px 10px 10px 10px;
    }

    //订单 统计背景 ，以及 排版
    .cb_tongji {
        padding: 10px 0px;
        border-radius: 8px;
        margin: 0px auto;
    }

    //订单 统计 ，左边的 方块
    .cb_jieshao_zi {
        padding: 5px 30px;
        background: #F8F8F8;
        box-shadow:1px 1px 1px 1px #cccccc;
        margin-bottom: 10px;
        border-radius: 10px;
        height: 90px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    //订单 统计 ，左边方框---上下排列
    .cb_tongji_shu {
        display: flex;
        flex-direction: column;
    }

    //订单统计  右边的 表格

    //订单统计 文字
    .cb_font {
        font-size: 0.8em;
        color: grey;
    }
    #cb_font_1,#cb_font_2,#cb_font_3,#cb_font_4{
        font-size: 1em;
        color: cornflowerblue;
    }

        //订单统计 数字第一个类型
    .cb_shuzi {
        font-size: 0.8em;
        color: red;
    }

    //订单统计 数字第二个类型
    .cb_shuzi2 {
        font-size: 0.8em;
        color: darkgreen;
    }

    //右侧 部分
    .cb_tankuang {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
    }

    .cb_tankuang_content {
        display: flex;
        flex-direction: column;
    }

    .cb_zuo {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    //右侧头像 部分
    #cb_touxiang {
        width: 1.5em;
        height: 1.5em;

    }
    #cb_touxiang_content{
        text-align: center;
        line-height: 1.7em;
        background: honeydew;
        width: 1.6em;
        height: 1.7em;
        border-radius: 50%;
    }

    .cb_person {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

   #cb_person_information{
       display: flex;
       justify-content: space-between;
       align-items: center;
   }

    //右侧 待处理事务
    #cb_right_header {
        margin: 5px 0px;
    }

    //右侧 数字大小
    .cb_zuo_shuzi {
        width: 24px;
        height: 16px;
        border-radius: 10px;
        background: red;
        color: white;
        line-height: 16px;
        text-align: center;
        font-size: 0.8em;
    }

    .cb_right span,svg{
        cursor: pointer;
    }




    //echars 搜索框部分
    .clear:after {
        content: '';
        clear: both;
        display: block;
    }
    .c_search {

            height: 40px;
            border-radius: 30%;
            margin-bottom: 20px;
        }
    //统计表
    .cb_biao{
        display: flex;
        flex-direction:column;
        align-self:stretch;
    }
    #cb_search_col{
        display: flex;
        justify-content:flex-end;
    }




</style>